<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="home">    
       我是首页组件
       <br>
       <ul>
           <li v-for="(item,key) in list">
               <router-link :to=" '/pcontent?id='+key">{{key}}--{{item}}</router-link>
           </li>
       </ul>
       <br><br>
       <button @click="goNews()">通过js跳转到新闻页面</button>
    </div>
</template>


<script>
    export default{
        data(){
            return {               
               msg:'我是一个home组件',
               list:['傻子','小傻子','大傻子']
            }
        },
        methods:{
            goNews(){
                //第一种跳转方式
                //跳到新闻列表页
                //this.$router.push({path:'news'})
                //跳到新闻详情页 
                //this.$router.push({path:'/content/495'});

                //另一种跳转方式
                //  { path: '/news', component: News,name:'news' }
                // router.push({ name: 'news', params: { userId: 123 }})
                 this.$router.push({ name: 'news'})
            }
        }
    }

</script>

<style lang="scss" scoped>
    
</style>